<template>
	<basic-container>
		<avue-crud :option="option" :data="data" v-model="form" :page="page" ref="crud" @search-change="searchChange"
		 @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" :before-open="beforeOpen"
		 @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave" @on-load="onLoad">
		</avue-crud>
	</basic-container>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					coordinate: {}
				},
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					border: true,
					index: true,
					refreshBtn: false,
					excelBtn: true,
					menuWidth: '150px',
					column: [{
							label: '编号',
							prop: 'code',
							width: '120px',
							disabled: true,
							placeholder: '系统自动生成'
						},
						{
							label: '名称',
							prop: 'name',
							maxlength: 20,
							searchPlaceholder: '编号&名称',
							search: true,
							rules: [{
								required: true,
								trigger: 'blur'
							}]
						},
						{
							label: '地址',
							prop: 'address',
							maxlength: 50,
							span: 24
						},
						{
							label: '联系人',
							prop: 'linkman',
							maxlength: 20,
							width: '120px'
						},
						{
							label: '联系方式',
							prop: 'contact',
							maxlength: 20,
							width: '120px'
						},
						{
							label: '选择坐标',
							prop: 'coordinate',
							hide: true,
							span: 24,
							component: 'AvueMap'
						}
					],
					group: [{
						label: '数据库信息',
						column: [{
								label: '服务器',
								prop: 'dbIp',
								maxlength: 20,
								rules: [{
									required: true,
									trigger: 'blur'
								}]
							},
							{
								label: '数据库',
								prop: 'dbase',
								maxlength: 20,
								rules: [{
									required: true,
									trigger: 'blur'
								}]
							}, {
								label: '登录名',
								prop: 'dbUser',
								maxlength: 20,
								rules: [{
									required: true,
									trigger: 'blur'
								}]
							},
							{
								label: '密码',
								prop: 'dbPwd',
								maxlength: 20,
								rules: [{
									required: true,
									trigger: 'blur'
								}]
							}
						]
					}]
				},
				data: []
			};
		},
		watch: {
			'form.coordinate'(val) {
				console.log(val)
				if (val != undefined && val != null && val != '' && val.latitude != null) {
					this.form.formattedAddress = val.formattedAddress
					this.form.latitude = val.latitude;
					this.form.longitude = val.longitude;
				}
			}
		},
		created() {},
		methods: {
			beforeOpen(done, type) {
				if (['add'].includes(type)) {
					this.form.coordinate = {};
				} else if (['edit'].includes(type)) {
					this.form.coordinate = {
						"formattedAddress": this.form.formattedAddress,
						"longitude": this.form.longitude,
						"latitude": this.form.latitude
					};
				}
				done();
			},
			rowSave(row, loading, done) {
				this.request({
					url: '/api/SysTenant/add',
					method: 'post',
					data: row
				}).then(
					() => {
						loading();
						this.onLoad(this.query);
						done();
					},
					error => {
						done();
						console.log(error);
					}
				);
			},
			rowUpdate(row, index, loading, done) {
				return this.request({
					url: '/api/SysTenant/edit',
					method: 'post',
					data: row
				}).then(
					() => {
						loading();
						this.onLoad(this.query);
					},
					error => {
						done();
						console.log(error);
					}
				);
			},
			rowDel(row) {
				this.$confirm('确定数据删除?', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						return this.request({
							url: '/api/SysTenant/remove',
							method: 'post',
							params: {
								ids: row.code
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				this.request({
					url: '/api/SysTenant/getpages',
					method: 'get',
					params: {
						key: this.query.name == undefined ? '' : this.query.name,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data;
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style></style>
